<template>
    <view style="width: 100%; height: 100%;" >
        <view class="content">
            <uni-forms ref="loginForm" :modelValue="loginFormData" :rule="loginValidationRule">
                <uni-form-item name="phone">
                    <van-field :value="loginFormData.phone" name="用户" label="用户" placeholder="手机号" type="number" @input="syncPhone"></van-field>
                </uni-form-item>
                <uni-form-item name="password">
                    <van-field :value="password" name="密码" label="密码" placeholder="密码" type="password" @input="syncPassword" ></van-field>
                </uni-form-item>
                <view class="login-btn">
                    <view>
                        <van-button type="info" block >密码登录</van-button>
                    </view>
                    <view style="margin-top: 5%">
                        <van-button type="info" block open-type="getPhoneNumber" @getphonenumber="doWxLogin">微信登录</van-button>
                    </view>
                </view>
            </uni-forms>
            <van-notify id="van-notify" />
        </view>
    </view>
</template>

<script>
    import Notify from '../../wxcomponents/vant/notify/notify';

    export default {
        name: "Login",
        data() {
            return {
                loginFormData: {
                    phone: '',
                    password: ''
                },
                loginValidationRule: {

                },
                contentClass: {
                    width: '375px',
                    height: '603px',
                },

            }
        },
        computed: {
        },
        onLoad() {
            this.contentClass = this.$store.getters.appWindow
            this.preWxLogin()
            this.authLocation()
        },
        methods: {

            async syncPhone(e) {
                this.phone = e.detail
            },
            async syncPassword(e) {
                this.password = e.detail
            },
            async preWxLogin() {
                let {loginCode} = this.wxLoginPromise().then(res => {
                    return {
                        loginCode: res.code,
                    };
                })

                let {openId, sessionKey} = await this.uniRequest({
                    url: '/login/wx',
                    method: 'POST',
                    data: {
                        jsCode: loginCode,
                    }
                }).then((res) => {
                    return {
                        openId: res.data.openId,
                        sessionKey: res.data.sessionKey,
                    }
                }).catch((err) => {
                    console.error('登录请求后台接口错误: ', err)
                    Notify('登录请求发送失败!')
                })

                uni.setStorage({
                    key: 'openId',
                    data: openId
                })


            },

            async authLocation() {
                let isAuthLocation = uni.getSetting({
                    success: (res) => {
                        // console.log('Get Setting Result: ', res.authSetting)
                        if (res.authSetting['scope.userLocation'] === undefined || res.authSetting['scope.userLocation'] === null) {
                            return false
                        }
                        return true
                    }
                })
                if (!isAuthLocation) {
                    uni.authorize({
                        scope: 'scope.userLocation',
                        success: () => {
                            console.log('地理位置权限授权成功！')
                        },
                        fail: () => {
                            console.error('地理位置权限授权失败！')
                        }
                    })
                }
            },


            /**
             * 微信登录Function
             *
             */
            wxLoginPromise: function() {
                return new Promise((resolve, reject) => {
                    uni.login({
                        provider: 'weixin',
                        success: (loginRes) => {
                            if (loginRes.errMsg !== 'login:ok') {
                                console.error('wx.login调用后返回值错误: ', loginRes)
                                return Notify('登录失败')
                            }
                            resolve(loginRes)
                        },
                        fail: (err) => {
                            Notify('登录失败')
                            console.error('wxLoginPromise err: ', err)
                            reject(err)
                        }
                    })
                })
            },


            doWxLogin(e) {
                console.log(e)
                uni.switchTab({
                    url: '/pages/station/index'
                })
            }

        }
    }
</script>

<style scoped>

    .content {
        position: relative;
        margin-top: 45%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .login-btn {
        width: 100%;
        position: relative;
        margin-top: 5%;
    }

</style>